<template>
	<div style="width: 100%;padding: 0 20px; box-sizing: border-box;">
  <h2>1. CSS Transition（过渡动画）</h2>
  <h2>transition: all 0.3s ease-in-out</h2>
  <h2>transform: rotate(45deg);</h2>
  <div class="view-content">
    <div class="content">
      <div class="view-html box"></div>
    </div>
    <div class="view-code">
      &lt;div class="box"&gt;&lt;/div&gt;<br /><br />
        .box { width: 100px;height: 100px;background-color: #3498db; transition:
        all 0.3s ease-in-out;margin: 20px; } <br />
        .box:hover {width:200px;background-color: #e74c3c;
        transform:rotate(45deg); }
    </div>
  </div>

  <h2>2. CSS Animation（关键帧动画）</h2>
	<h2>animation: moveAndChange 4s infinite alternate; </h2>
  <h2>@keyframes moveAndChange{}</h2>
  <div class="view-content">
    <div class="content">
      <div class="view-html box1"></div>
    </div>

    <div class="view-code">
      &lt;div class="box"&gt;&lt;/div&gt;<br /><br />
      .box { width: 100px; height: 100px; background-color: #2ecc71; position:
      relative; animation: moveAndChange 4s infinite alternate; } <br />
      @keyframes moveAndChange { <br />
      &nbsp;&nbsp;0% { left: 0; background-color: #2ecc71; transform:
      rotate(0deg); } <br />
      &nbsp;&nbsp;50% { background-color: #f1c40f; transform: rotate(180deg); }
      <br />
      &nbsp;&nbsp;100% { left: 300px; background-color: #9b59b6; transform:
      rotate(360deg); } <br />}
    </div>
  </div>
  <h2>3. Transform（变换动画）</h2>
  <h2>transition: transform 0.5s ease;</h2>
  <h2>transform: rotate(45deg)/scale(1.5)/translate(20px, -20px)/skew(20deg, 10deg);</h2>
  <div class="view-content">
    <div class="content">
      <div class="container">
        <div class="box2 rotate">旋转</div>
        <div class="box2 scale">缩放</div>
        <div class="box2 translate">平移</div>
        <div class="box2 skew">倾斜</div>
      </div>
    </div>

    <div class="view-code">
      <div style="width: 500px">
        <strong>HTML</strong>
        &lt;div class="container"&gt;<br />
        &lt;div class="box2 rotate"&gt;&lt;/div&gt;<br />
        &lt;div class="box2 scale"&gt;&lt;/div&gt;<br />
        &lt;div class="box2 translate"&gt;&lt;/div&gt;<br />
        &lt;div class="box2 skew"&gt;&lt;/div&gt;<br />
        &lt;/div&gt;
      </div>
      <div>
        <strong>CSS</strong>
        .container { display: flex; gap: 30px; margin: 20px; } <br />
        .box2 { width: 100px; height: 100px; background-color: #3498db; display:
        flex; justify-content: center; align-items: center; color: white;
        transition: transform 0.5s ease; }<br />
        .rotate:hover { transform: rotate(45deg); }<br />
        .scale:hover { transform: scale(1.5); } <br />
        .translate:hover { transform: translate(20px, -20px); } <br />
        .skew:hover { transform: skew(20deg, 10deg); }
      </div>
    </div>
  </div>
  <h2>4. 3D Transform（3D变换动画）</h2>
  <h2> 父及样式：transform-style: preserve-3d;
		transform: translateZ(-100px);
		transition: transform 1s;</h2>
  <h2>子级样式：transform: rotateY(0deg) translateZ(100px);</h2>
  <h2>鼠标经过动画：transform: translateZ(-100px) rotateY(360deg) rotateX(360deg);</h2>
  <div class="view-content">
    <div class="content">
      <div class="scene">
        <div class="cube">
          <div class="cube-face front">前</div>
          <div class="cube-face back">后</div>
          <div class="cube-face right">右</div>
          <div class="cube-face left">左</div>
          <div class="cube-face top">上</div>
          <div class="cube-face bottom">下</div>
        </div>
      </div>
    </div>

    <div class="view-code">
      <div style="width: 500px">
        <strong>HTML</strong>
        &lt;div class="scene"&gt;<br />
        &lt;div class="cube"&gt;<br />
        &lt;div class="cube-face front"&gt; 前&lt;/div&gt;<br />
        &lt;div class="cube-face back"&gt; 后&lt;/div&gt;<br />
        &lt;div class="cube-face right"&gt; 右&lt;/div&gt;<br />
        &lt;div class="cube-face left"&gt; 左&lt;/div&gt;<br />
        &lt;div class="cube-face top"&gt; 上&lt;/div&gt;<br />
        &lt;div class="cube-face bottom"&gt; 下&lt;/div&gt;<br />
        &lt;/div&gt; &lt;/div&gt;
      </div>
      <div>
        <strong>CSS</strong>
        .scene { width: 200px; height: 200px; perspective: 600px; margin: 50px
        auto; } <br />
        .cube { width: 100%; height: 100%; position: relative; transform-style:
        preserve-3d; transform: translateZ(-100px); transition: transform 1s;
        }<br />
        .cube-face { position: absolute; width: 200px; height: 200px; border:
        2px solid white; line-height: 200px; font-size: 40px; font-weight: bold;
        color: white; text-align: center; opacity: 0.8; }<br />
        .front { background: rgba(255, 0, 0, 0.7); transform: rotateY(0deg)
        translateZ(100px); } <br />
        .back { background: rgba(0, 255, 0, 0.7); transform: rotateY(180deg)
        translateZ(100px); }<br />
        .right { background: rgba(0, 0, 255, 0.7); transform: rotateY(90deg)
        translateZ(100px); }<br />
        .left { background: rgba(255, 255, 0, 0.7); transform: rotateY(-90deg)
        translateZ(100px); } <br />
        .top { background: rgba(255, 0, 255, 0.7); transform: rotateX(90deg)
        translateZ(100px); } <br />
        .bottom { background: rgba(0, 255, 255, 0.7); transform: rotateX(-90deg)
        translateZ(100px); }<br />
        .cube:hover { transform: translateZ(-100px) rotateY(360deg)
        rotateX(360deg); } <br />
        .controls { text-align: center; margin-top: 30px; }
      </div>
    </div>
  </div>
</div>
</template>

<script setup></script>

<style lang="scss">
h2 {
  font-weight: bold;
}
.view-content {
  display: flex;
  justify-content: flex-start;
  padding-top: 30px;
  margin-bottom: 20px;
}
.view-code {
  margin-left: 50px;
  display: flex;
  strong {
    display: block;
		width: 100%;
  }
  i {
    font-weight: bold;
  }
}
.content {
  width: 400px;
}
/* CSS Transition（过渡动画）*/
.box {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  transition: all 0.3s ease-in-out;
  margin: 20px;
}

.box:hover {
  width: 200px;
  background-color: #e74c3c;
  transform: rotate(45deg);
}
/* CSS Animation（关键帧动画） */
.box1 {
  width: 100px;
  height: 100px;
  background-color: #2ecc71;
  position: relative;
  animation: moveAndChange 4s infinite alternate;
}

@keyframes moveAndChange {
  0% {
    left: 0;
    background-color: #2ecc71;
    transform: rotate(0deg);
  }
  50% {
    background-color: #f1c40f;
    transform: rotate(180deg);
  }
  100% {
    left: 300px;
    background-color: #9b59b6;
    transform: rotate(360deg);
  }
}

/* Transform（变换动画） */
.container {
  display: flex;
  gap: 30px;
  margin: 20px;
}

.box2 {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: transform 0.5s ease;
}

.rotate:hover {
  transform: rotate(45deg);
}

.scale:hover {
  transform: scale(1.5);
}

.translate:hover {
  transform: translate(20px, -20px);
}

.skew:hover {
  transform: skew(20deg, 10deg);
}

/* 3D Transform（3D变换动画） */
.scene {
  width: 200px;
  height: 200px;
  perspective: 600px;
  margin: 50px auto;
}

.cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px);
  transition: transform 10s;
}

.cube-face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid white;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
  opacity: 0.8;
}

.front {
  background: rgba(255, 0, 0, 0.7);
  transform: rotateY(0deg) translateZ(100px);
}
.back {
  background: rgba(0, 255, 0, 0.7);
  transform: rotateY(180deg) translateZ(100px);
}
.right {
  background: rgba(0, 0, 255, 0.7);
  transform: rotateY(90deg) translateZ(100px);
}
.left {
  background: rgba(255, 255, 0, 0.7);
  transform: rotateY(-90deg) translateZ(100px);
}
.top {
  background: rgba(255, 0, 255, 0.7);
  transform: rotateX(90deg) translateZ(100px);
}
.bottom {
  background: rgba(0, 255, 255, 0.7);
  transform: rotateX(-90deg) translateZ(100px);
}

.cube:hover {
  transform: translateZ(-100px) rotateY(360deg) rotateX(360deg);
}

.controls {
  text-align: center;
  margin-top: 30px;
}
</style>
